<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>药品管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <script type="text/javascript" src="../js/jquery-1.12.2.min.js"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<table class="layui-table" lay-data="{url:'/hospital/manager/room/find.do', page:true, id:'idTest'}" lay-filter="demo">
    <thead>
    <tr>
        <th lay-data="{field:'id', width:80, sort: true, fixed: true}">ID</th>
        <th lay-data="{field:'number', width:120}">房间容量</th>
        <th lay-data="{field:'typeName', width:120}">房间类型</th>
        <th lay-data="{field:'price', width:120, sort: true}">房间价格</th>
        <th lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}"></th>
    </tr>
    </thead>
</table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="../layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['table', 'form', 'jquery'], function () {
        var table = layui.table,
            form = layui.form,
            $ = layui.jquery;

        //监听工具条
        table.on('tool(demo)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    console.log(data);
                    // 向服务端发送删除指令
                    $.ajax({
                        url: "/hospital/manager/room/delete.do",
                        type: "POST",
                        data: {"id": data.id},//向服务端发送删除的id
                        dataType: "json",
                        success: function (data) {
                            if (data.code === 1) {
                                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                layer.close(index);
                                layer.msg("删除成功", {icon: 6});
                            } else {
                                layer.msg("删除失败", {icon: 5});
                            }
                        }
                    });
                });
            } else if (obj.event === 'edit') {
                layer.open({
                    type: 1,
                    title: "修改房间价格",
                    area: ['auto'],
                    content: $("#popUpdateTest")
                });
                setFormValue(obj, data);
            }

        });



        //监听弹出框表单提交，massage是修改界面的表单数据'submit(demo11),是修改按钮的绑定
        function setFormValue(obj, data) {
            form.on('submit(demo11)', function (massage) {
                $.ajax({
                    url: '/hospital/manager/room/update.do',
                    type: 'POST',
                    data: {
                        typeName: data.typeName,
                        price: massage.field.price
                    },
                    dataType: "json",
                    success: function (msg) {
                        if (msg.code === 1) {
                            layer.closeAll('loading');
                            layer.load(2);
                            layer.msg("修改成功", {icon: 6});
                            setTimeout(function () {
                                obj.update();//修改成功修改表格数据不进行跳转
                                layer.closeAll();//关闭所有的弹出层
                            }, 1000);
                        } else {
                            layer.msg("修改失败", {icon: 5});
                        }
                    }
                })
            })
        }


        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>

<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<!--//这里是弹出层的表单信息
//表单的id用于表单的选择，style是在本页隐藏，只有点击编辑才会弹出-->
<div class="layui-row" id="popUpdateTest" style="display:none;">
    <div class="layui-col-md10">
        <form class="layui-form layui-from-pane" action="" style="margin-top:20px">
            <div class="layui-form-item">
                <label class="layui-form-label">房间价格</label>
                <div class="layui-input-block">
                    <input type="text" name="price" required lay-verify="required" autocomplete="off"
                           placeholder="新的价格" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item" style="margin-top:40px">
                <div class="layui-input-block">
                    <button class="layui-btn  layui-btn-submit " lay-submit="" lay-filter="demo11">确认修改</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
</html>